<template>
	<view class="container">
		<view class="background-color" :style="'background:' + mobile_head_color">
			<view class="topbox">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view class="info-box">
						<view class="name">{{listdata.owner_name}}</view>
						<view class="tips">业主</view>
					</view>
					<view class="lookRegistration" @tap="govisitor">查看访客记录</view>
				</view>
				<view class="phone">{{listdata.owner_phone}}</view>
				<view class="address-box">
					<view class="address-icon">
						<image src="../../../static/images/address.png" class="address-img"></image>
					</view>
					<view class="address-text" v-if="listdata.address">{{listdata.address}}</view>
				</view>
			</view>
		</view>
		<view style="background-color: #FFFFFF;margin-top: 20rpx;">
			<view class="card">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<text style="color: red;margin-right: 15rpx;">*</text>
					<view style="font-size: 30rpx;">访客姓名</view>
				</view>
				<input class="ipt-box" v-model="name" type="text" value="" placeholder-class="pla-text" placeholder="请输入访客姓名"/>
			</view>
			<view class="card">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<text style="color: red;margin-right: 15rpx;">*</text>
					<view style="font-size: 30rpx;">访客联系方式</view>
				</view>
				<input class="ipt-box" v-model="phone" type="number" value="" placeholder-class="pla-text" placeholder="请输入访客联系方式"/>
			</view>
			<view class="card" style="margin-top: 0;">
				<view class="card-box">
					<view style="font-size: 30rpx;">访客性别</view>
					<view class="switch-box">
						<view class="btn-box" v-for="(item,index) in list" @tap="seletSex(index,item.type)" :class="num == index?'activebtn':''">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="card" style="flex-direction: column;align-items: unset;">
				<view class="card-box" style="border: none;">
					<view style="font-size: 30rpx;">是否驾车</view>
					<switch :checked="disableds" @change="ChangeCarnum" style="transform:scale(0.7)"/>
				</view>
				<view class="flex-box" v-if="disableds">
					<input type="text" class="car-ipt" value="" v-model="car_id" :disabled="!disableds" placeholder-class="pla-text1" placeholder="请输入车牌号"/>
					
				</view>
			</view>
			<view class="card" style="flex-direction: column;align-items: unset;" v-if="listdata.is_park_rate">
				<view class="card-box" style="border: none;">
					<view style="font-size: 30rpx;">是否帮好友预存停车费</view>
					<switch checked="true" @change="switch1Change" style="transform:scale(0.7)"/>
				</view>
				<view class="card-box" style="border: none;margin-top: 10rpx;">
					<view style="font-size: 30rpx;">请输入预存金额</view>
					<view class="input-box1">
						<input type="text" v-model="money" value="" class="mini-cards"/>
					</view>
				</view>
				<view class="flex-box" style="color: #CCCCCC;padding: 30rpx 0rpx 0rpx 0rpx;">
					该好友商场后如果还有剩余金额,会立即退还至您的余额中
				</view>
			</view>
			<view class="card"  v-if="listdata.is_open_door">
				<view class="card-box">
					<view style="font-size: 30rpx;">是否给好友开启开门权限</view>
					<switch :checked="is_open_door" @change="ChangeopenDoor" style="transform:scale(0.7)"/>
				</view>
			</view>
			<view class="card">
				<view class="card-box" @tap="seletdate">
					<view class="left-box">
						<text style="color: red;margin-right: 15rpx;">*</text>
						<view style="font-size: 30rpx;flex-shrink: 0;">到访时间</view>
					</view>
					<text style="text-align: right;width: 100%;">{{add_time}}</text>
					<image src="../../../static/images/right.png" mode="" class="right-img"></image>
				</view>
			</view>
		</view>
		
		<!-- <view>
			<image :src="hhhh" mode=""></image>
		</view> -->
		<!-- <view class="independent_payment" @tap="goaddRegistration">
			<image src="../../../static/images/visitor.png" class="independent-img"></image>
		</view> -->
		<view type="primary" class="btn1" :class="btn_style" @tap="goQRvisitor">生成通行证</view>
		<w-picker
			mode="date" 
			startYear="2017" 
			endYear= "2040"
			:defaultVal="['2020','4','21']"
			:current="false" 
			@confirm="onConfirm"
			:disabledAfter="false"
			ref="date" 
			themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
	import wPicker from "../component/w-picker/w-picker.vue";
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getvisitorList = () => {
		common.post('HouseApi&a=get_visitor_info', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data;
			_this.dataList = data.dataList;
		});
	};
	const getconfirmPass = () => {
		common.post('HouseApi&a=add_visitor', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			visitor_name: _this.name,//访客姓名
			visitor_phone: _this.phone,//访客联系方式
			visitor_sex: _this.visitor_sex,//访客性别
			is_car: _this.is_car,//是否开车
			car_id: _this.car_id,//车牌 
			is_park_rate: _this.is_park_rate,
			park_rate: _this.park_rate,
			is_open_door: _this.is_open_door,//是否开启人脸门禁,//是否开启人脸门禁
			add_time: _this.add_time,//到访时间
		}, data => {
			console.log('++++', data.qrcode)
			_this.hhhh = data.qrcode
			uni.navigateTo({
				url:'/pages/village/my/shareVisitor?qrcode=' + encodeURIComponent(data.qrcode) + '&visitor_id=' + data.visitor_id
			})
		});
	};
	
	export default {
		data() {
			return {
				hhhh: '',
				listdata: {},
				dataList:[],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				mobile_head_color: '',
				id:0,
				isFirstLoad:true,
				list:[
					{
						name: '先生',
						type: 1,
					},
					{
						name: '女士',
						type: 2,
					}
				],
				num: 0,
				switchshow: false,
				name:'',//访客姓名
				phone:'',//访客联系方式
				disableds: true,
				visitor_sex: 1,//访客性别
				is_car: 1,//是否开车
				car_id:'',//车牌
				is_park_rate:'',
				park_rate:'',
				add_time: '',//到访时间
				is_open_door: true,//是否开启人脸门禁
				money: '',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
			if(_this.isFirstLoad == false){
				getvisitorList();
			}
		},
		onLoad(options) {
			_this = this;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getvisitorList()
				_this.isFirstLoad = false;
			});
		},
		methods: {
			govisitor(){
				uni.navigateTo({
					url:'/pages/village/my/visitorRegistrationlist'
				})
			},
			goaddRegistration(){
				uni.navigateTo({
					url:'/pages/village/my/addvisitor'
				})
			},
			gopass(id){
				_this.id = id
				console.log("22222222",_this.id)
				getconfirmPass()
			},
			seletSex(index,type){
				_this.num = index;
				_this.visitor_sex = type
			},
			switch1Change(e){
				console.log(e)
			},
			goQRvisitor(){
				if(_this.name == '' && _this.phone == ''&& _this.add_time == ''){
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请您补充页面中必填信息'),
						showCancel: false,
						confirmText: common.changeTxt('确定'),
						success: function(res) {
							if (res.confirm) {
								
							}
						}
					});
					return false;
				}
				getconfirmPass()
			},
			ChangeCarnum(e){
				console.log(e)
				_this.disableds = e.detail.value;
				if(_this.disableds == true){
					_this.is_car = 1
				}else{
					_this.is_car = 0
				}
			},
			ChangeopenDoor(e){
				console.log(e)
				_this.is_open_door = e.detail.value;
				if(_this.is_open_door == true){
					_this.is_open_door == 1
				}else{
					_this.is_open_door == 0
				}
				console.log("wwwww",_this.is_open_door)
			},
			seletdate(){
				_this.$refs.date.show();
			},
			onConfirm(val){
				console.log(val);
				_this.add_time = val.result
			},
		},
		components: {
			wPicker
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}
	.topbox {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		background: url(../../../static/images/visitor-bg1.png);
		background-position-x: 500rpx;
		background-position-y: 70rpx;
		background-repeat: no-repeat;
		background-size: 30%;
	}
	.info-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.name {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	.tips {
		background-color: #ffa112;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}
	.phone {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.address-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
	}
	.address-icon {
		width: 25rpx;
		height: 30rpx;
		margin-right:8rpx;
	}
	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.address-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.card {
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #f1f1f1;
	}
	.ipt-box {
		height: 60rpx;
		text-align: right;
	}
	.pla-text {
		font-size: 28rpx;
		text-align: right;
	}
	.pla-text1 {
		font-size: 28rpx;
	}
	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
	}
	.independent-img {
		width: 100%;
		height: 100%;
		border-radius: 102rpx;
		display: block;
	}
	.tip_box_no_data {
		padding-top: 200rpx;
		font-size: 28rpx;
		text-align: center;
	}
	.lookRegistration{
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		color: #FFFFFF;
		background-color: rgba(227, 232, 227, 0.5);
	}
	
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
	.card-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
		width: 100%;
	}
	.switch-box {
		border: 2rpx solid #2681f3;
		overflow: hidden;
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.btn-box {
		padding: 5rpx 20rpx;
		color: #2681f3;
	}
	.activebtn {
		background: #2681f3;
		color: #FFFFFF;
	}
	.left-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.right-img {
		width: 30rpx;
		height: 30rpx;
		display: block;
		flex-shrink: 0;
	}
	.btn1 {
		height: 76rpx;
		margin: 0rpx 50rpx;
		margin-top: 80rpx;
		line-height: 76rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #2681f3;
		border-radius: 60rpx;
	}
	.flex-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.input-box1 {
		margin-left: 19rpx;
		position: relative;
		overflow: hidden;
		border-radius: 10rpx;
		border: 4rpx solid rgb(38, 129, 243);
	}
	.mini-cards {
		width: 180rpx;
		height: 60rpx;
		background-color: rgba(201, 201, 201, 0.2);
		text-align: center;
	}
	.car-ipt {
		height: 80rpx;
	}
</style>